<!-- 
<template>
  <el-container>
    <el-main>
      <el-dialog
        title="请选择"
        :visible.sync="dialogDirVisible"
        width="80%"
        append-to-body
        v-if="dialogDirVisible"
      >
        <dirlist :dialogDirVisible="dialogDirVisible" :key-name="keyName" @close="changeDir"></dirlist>
      </el-dialog>
      <el-row>
        <el-col :span="24">
          <el-form :model="taskform" size="mini" label-width="180px">
            <el-divider>数据库配置</el-divider>
            <el-form-item
              label="数据库类型"
              prop="dbtype"
              :rules="[{required:true,message:'请选择类型名称',trigger:'blur'}]"
              v-if="formType=='sql'"
            >
              <el-select v-model="taskform.dbtype" placeholder="请选择">
                <el-option
                  v-for="item in sqltypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="SQL地址"
              prop="host"
              :rules="[{required:true,message:'请输入主机地址',trigger:'blur'}]"
              v-if="taskform.dbtype == 'mysql' || taskform.dbtype == 'mssql'"
            >
              <el-input v-model="taskform.host"></el-input>
            </el-form-item>
            <el-form-item
              label="SQL端口"
              prop="port"
              :rules="[{required:true,message:'请输入主机端口',trigger:'blur'}]"
              v-if="taskform.dbtype == 'mysql' || taskform.dbtype == 'mssql'"
            >
              <el-input v-model="taskform.port"></el-input>
            </el-form-item>
            <el-form-item
              label="SQL用户名"
              prop="user"
              :rules="[{required:true,message:'请输入用户名',trigger:'blur'}]"
              v-if="taskform.dbtype == 'mysql' || taskform.dbtype == 'mssql'"
            >
              <el-input v-model="taskform.user"></el-input>
            </el-form-item>
            <el-form-item
              label="SQL密码"
              prop="password"
              :rules="[{required:true,message:'请输入密码',trigger:'blur'}]"
              v-if="taskform.dbtype == 'mysql' || taskform.dbtype == 'mssql'"
            >
              <el-input v-model="taskform.password" show-password></el-input>
            </el-form-item>
            <el-form-item
              label="数据库名"
              prop="dbname"
              :rules="[{required:true,message:'请输入数据库名',trigger:'blur'}]"
              v-if="taskform.dbtype == 'mysql' || taskform.dbtype == 'mssql'"
            >
              <el-input v-model="taskform.dbname"></el-input>
            </el-form-item>
            <el-form-item label="字符编码" v-if="taskform.dbtype == 'mysql'">
              <el-select v-model="taskform.char" placeholder="请选择">
                <el-option
                  v-for="item in chars"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="数据库路径"
              prop="dbpath"
              :rules="[{required:true,message:'请选择数据库路径',trigger:'blur'}]"
              v-if="taskform.dbtype == 'sqlite'"
            >
              <el-input v-model="taskform.dbpath" :disabled="true">
                <el-button slot="append" icon="el-icon-search" @click="enableDirSearch('dbpath')"></el-button>
              </el-input>
            </el-form-item>
            <el-form-item
              label="路径"
              prop="dbpath"
              :rules="[{required:true,message:'请选择路径',trigger:'blur'}]"
              v-if="taskform.dbtype == 'file'"
            >
              <el-input v-model="taskform.dbpath" autocomplete="off" :disabled="true">
                <el-button slot="append" icon="el-icon-search" @click="enableDirSearch('dbpath')"></el-button>
              </el-input>
            </el-form-item>
            <el-divider>任务配置</el-divider>
            <el-form-item
              label="本地存储"
              prop="localsave"
              v-if="taskform.ssh == 'notlocalhost' && taskform.dbtype=='mysql'"
            >
              <el-switch
                style="display: block"
                v-model="taskform.localsave"
                active-color="#F56C6C"
                inactive-color="#13ce66"
                active-text="存储"
                inactive-text="不存储"
                active-value="saveyes"
                inactive-value="saveno"
              ></el-switch>
            </el-form-item>

            <el-form-item
              label="保存路径"
              prop="savepath"
              :rules="[{required:true,message: '请输入保存路径', trigger: 'blur' }]"
            >
              <el-input v-model="taskform.savepath" :disabled="true">
                <el-button slot="append" icon="el-icon-search" @click="enableDirSearch('savepath')"></el-button>
              </el-input>
            </el-form-item>

            <el-form-item v-if="dialogtitle" label="任务暂停">
              <el-switch v-model="taskform.pause" active-value="yes" inactive-value="no"></el-switch>
            </el-form-item>
            <el-form-item label="是否加密">
              <el-switch v-model="enablezippwd"></el-switch>
            </el-form-item>
            <el-form-item label="压缩密码" v-if="enablezippwd">
              <el-input v-model="taskform.zippwd" show-password></el-input>
            </el-form-item>
            <el-form-item label="远程存储">
              <el-select v-model="taskform.rs" multiple>
                <el-option
                  v-for="item in remotestorages"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="执行频率">
              <el-select v-model="pinlv" @change="changepinlv">
                <el-option
                  v-for="item in pinlvs"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期" v-if="pinlv == 'month'">
              <el-select v-model="day" placeholder="请选择" @change="cjobs">
                <el-option
                  v-for="item in days"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="周" v-if="pinlv == 'week'">
              <el-select v-model="week" placeholder="请选择" @change="cjobs">
                <el-option
                  v-for="item in weeks"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间点">
              <el-time-picker
                v-model="times"
                placeholder="任意时间点"
                @change="createjobs"
                value-format="H m s"
              ></el-time-picker>
            </el-form-item>
            <el-form-item
              label="计划任务"
              prop="crontab"
              :rules="[
                        { required: true, message: '请输入 计划任务', trigger: 'blur' }
                    ]"
            >
              <el-input v-model="taskform.crontab"></el-input>
            </el-form-item>
            <el-form-item label="本地备份删除">
              <el-switch v-model="expire" @change="expirefunc"></el-switch>
            </el-form-item>
            <el-form-item label="本地备份保留数" v-if="expire">
              <el-input-number v-model="taskform.expire" :min="0" :max="100"></el-input-number>个
            </el-form-item>
            <el-form-item>
              <el-button type="warning" @click="testtask">测试执行</el-button>
              <el-button v-if="!dialogtitle" type="success" @click="addtask">确定</el-button>
              <el-button v-else type="primary" @click="edittask">确定</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script>
import Dirlist from "@/components/Dirlist.vue";

export default {
  components: { Dirlist },
  props: {
    dialogtitle: {
      type: Boolean,
      default: false,
    },
    editTaskId: {
      type: String,
      default: "",
    },
    // formType: {
    //   type: String,
    //   default: "sql",
    // },
  },
  data() {
    return {
      formType:"file",
      sqltypes: [
        { value: "mysql", label: "Mysql" },
        { value: "mssql", label: "Sql Server" },
        { value: "sqlite", label: "Sqlite3" },
        { value: "postgres", label: "Postgres" },
      ],
      chars: [
        { value: "utf8", label: "UTF-8" },
        { value: "gbk", label: "GBK" },
        { value: "gb3212", label: "GB2312" },
      ],
      dialogDirVisible: false,
      keyName: "",
      expire: false,
      taskform: { crontab: "" },
      day: "1",
      week: "1",
      times: "",
      pinlv: "day",
      enablezippwd: false,
      remotestorages: [],
      pinlvs: [
        { value: "day", label: "天" },
        { value: "week", label: "周" },
        { value: "month", label: "月" },
      ],
      weeks: [
        { value: "1", label: "周一" },
        { value: "2", label: "周二" },
        { value: "3", label: "周三" },
        { value: "4", label: "周四" },
        { value: "5", label: "周五" },
        { value: "6", label: "周六" },
        { value: "0", label: "周日" },
      ],
      days: [
        { value: "1", label: "1" },
        { value: "2", label: "2" },
        { value: "3", label: "3" },
        { value: "4", label: "4" },
        { value: "5", label: "5" },
        { value: "6", label: "6" },
        { value: "7", label: "7" },
        { value: "8", label: "8" },
        { value: "9", label: "9" },
        { value: "10", label: "10" },
        { value: "11", label: "11" },
        { value: "12", label: "12" },
        { value: "13", label: "13" },
        { value: "14", label: "14" },
        { value: "15", label: "15" },
        { value: "16", label: "16" },
        { value: "17", label: "17" },
        { value: "18", label: "18" },
        { value: "19", label: "19" },
        { value: "20", label: "20" },
        { value: "21", label: "21" },
        { value: "22", label: "22" },
        { value: "23", label: "23" },
        { value: "24", label: "24" },
        { value: "25", label: "25" },
        { value: "26", label: "26" },
        { value: "27", label: "27" },
        { value: "28", label: "28" },
        { value: "29", label: "29" },
        { value: "30", label: "30" },
        { value: "31", label: "31" },
        { value: "L", label: "最后一天" },
      ],
    };
  },
  created() {
    this.ftpGet();
    this.formType = this.$route.params.formType
    if (this.formType === "sql") {
      this.taskform = {
        char: "utf8",
        port: "3306",
        crontab: "",
        rs: [],
        pause: "no",
        expire: 0,
      };
      this.sqltypes[
        ({ value: "mysql", label: "Mysql" },
        { value: "mssql", label: "Sql Server" },
        { value: "sqlite", label: "Sqlite3" })
      ];
    } else {
      this.taskform = {
        dbtype: "file",
        crontab: "",
        rs: [],
        pause: "no",
        expire: 0,
      };
    }
    if (this.dialogtitle) {
      this.GetOneTask(this.editTaskId);
    }
  },
  methods: {
    changeDir(dirpath) {
      this.taskform[dirpath.name] = dirpath.value;
      this.dialogDirVisible = false;
    },
    enableDirSearch(str) {
      this.keyName = str;
      this.dialogDirVisible = true;
    },
    ftpGet() {
      this.$http.Get(this.$api.ftps, { page: 1, count: -1 }, (res) => {
        this.remotestorages = res.data;
      });
    },
    changepinlv(e) {
      this.pinlv = e;
      this.cjobs();
    },
    createjobs(e) {
      this.times = e;
      this.cjobs();
    },
    expirefunc() {
      this.taskform.expire = 0;
    },
    testtask() {
      this.$http.Post(this.$api.jobtest, this.taskform, () => {});
    },
    addtask() {
      this.$http.Post(
        this.$api.task,
        this.taskform,
        () => {
          this.$emit("close");
        },
        "添加任务"
      );
    },
    cjobs() {
      var arrtimes = this.times.split(" ");
      var crontabstr = "";
      if (arrtimes.length === 3) {
        crontabstr = arrtimes[2] + " " + arrtimes[1] + " " + arrtimes[0];
        if (this.pinlv === "month" && this.day) {
          crontabstr = crontabstr + " " + this.day + " * *";
        } else if (this.pinlv === "week" && this.week) {
          crontabstr = crontabstr + " * * " + this.week;
        } else {
          crontabstr = crontabstr + " * * *";
        }
      }
      this.taskform.crontab = crontabstr;
    },
    edittask() {
      this.$http.Put(
        this.$api.task + "/" + this.taskform.id,
        this.taskform,
        () => {
          this.$emit("close");
        },
        "修改任务"
      );
    },
    GetOneTask(id) {
      this.$http.Get(this.$api.task + "/" + id, {}, (res) => {
        this.taskform = res;
        if (res.expire > 0) {
          this.expire = true;
        } else {
          this.expire = false;
        }
      });
    },
  },
};
</script>

-->